<template>
<div>
  <div>
    <h1>鼠标位置的获取</h1>
    <p>x:{{ point.x }} |y:{{ point.y }}</p>
    <button @click.stop="reset">重置</button>
  </div>

  <div>
    <p v-if="isLoading">Loading</p>
    <img v-else :src="imgUrl" alt="" />
  </div>
</div>
</template>

<script lang="ts">
import { defineComponent} from "vue";

export default defineComponent({
  name: "About",
});
</script>

<script setup lang="ts">
  import useMousePoint from "./hooks/usePoint"
  import useLoadImg from "./hooks/useLoadImg"

  const {point , reset} = useMousePoint()
  const {isLoading , imgUrl} = useLoadImg()
  
</script>